<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./node_modules/vue/dist/vue.min.js"></script>
  <script>
    const myMixin = {
      data() {
        return {
          a: 1,
          innerObj: {
            a: 1,
            obj: {
              o: 'o',
              d: 'd'
            },
            arr: [1, 2]
          },
          innerArr: [1, 2, { a: 45 }]
        }
      },
      created() {
        console.log('mixin created1')
      }
    }
    const vm = new Vue({
      mixins: [myMixin],
      data() {
        return {
          a: 2,
          innerObj: {
            a: 2,
            b: 'b',
            obj: {
              o: 'o2',
              c: 'c'
            },
            arr: []
          },
          innerArr: [3, 4, { b: 2 }]
        }
      },
      created() {
        console.log('created 1')
      }
    })
    console.log(vm)
  </script>
</body>

</html>